<template>
  <div>
    <a-empty v-if="dataList.length == 0" :image="simpleImage" />
    <chart :options="options" v-else :style="{ height: height + 'px' }"></chart>
  </div>
</template>
<script>
import { Empty } from 'ant-design-vue';
import { requestHttp, maccApi, fillTimeLineData } from '@utils/index';
import publicChart from './publicChart.vue';
import moment from 'moment-timezone';
import { i18nRender } from '@/locales';
export default {
  name: 'FlowTrend',
  props: {
    deviceInfo: {
      type: Object,
      default: null,
    },
    buildingId: {
      type: Number,
      default: 0,
    },
    timeRange: {
      type: Object,
      default: () => {
        return {
          end: +new Date(),
          start: +new Date() - 24 * 3600 * 1000,
          type: 'day',
        };
      },
    },
    height: {
      type: Number,
      default: 250,
    },
  },
  data() {
    return {
      options: {},
      dataList: [],
    };
  },
  components: {
    chart: publicChart,
  },
  watch: {
    type() {
      this.init();
    },
    timeRange: {
      handler() {
        this.init();
      },
      deep: true,
    },
    'deviceInfo.serialNumber'() {
      this.init();
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // const startDate = this.timeRange.start
      //   ? this.timeRange.start
      //   : +new Date() - 24 * 3600 * 1000;
      // const endDate = this.timeRange.end ? this.timeRange.end : +new Date();
      const params = {
        startDate: this.timeRange.start,
        endDate: this.timeRange.end,
        type: this.timeRange.type,
      };
      if (this.deviceInfo) {
        params.sn = this.deviceInfo.serialNumber;
      }
      if (this.buildingId) {
        params.buildingId = this.buildingId;
      }

      if (params.sn && this.timeRange.start && this.timeRange.end) {
        this.getOutletFlow(params);
      }
    },
    async getOutletFlow(params) {
      this.flowOptions = {};
      const requestParam = {
        api: maccApi.FLOW_SHOW,
        method: 'POST',
        params,
      };
      if (process.env.VUE_APP_MACC_ENV == 'INTL') {
        requestParam.module = 'logbiz';
      }
      const res = await requestHttp(requestParam);
      if (res.code != 0) {
        this.$message.error(res.msg || this.$t('deviceDetail.flowwan'));
        return;
      }
      console.log(res);
      this.dataList = res.list || [];
      if (res.list && res.list.length > 0) {
        let list = res.list;
        let timeList = [];
        let rxList = [];
        let txList = [];
        for (const key in list) {
          if (params.type == 'day') {
            timeList.push(list[key].timeString.split(' ')[1]);
            rxList.push(list[key].rxRate);
            txList.push(list[key].txRate);
          }
          if (params.type == 'week') {
            timeList.push(list[key].timeString);
            rxList.push((list[key].rxBytes / (1024 * 1024)).toFixed(3));
            txList.push((list[key].txBytes / (1024 * 1024)).toFixed(3));
          }
        }
        this.options = this.getLineChartOptions({
          timeList: timeList,
          dataList1: rxList,
          dataList2: txList,
          yname:
            params.type == 'day'
              ? i18nRender('deviceDetail.averangeMbs')
              : i18nRender('deviceDetail.flowMB'),
          sname:
            params.type == 'day'
              ? [
                  i18nRender('internetuser.downRate'),
                  i18nRender('internetuser.upRate'),
                ]
              : [
                  i18nRender('internetuser.downData'),
                  i18nRender('internetuser.upData'),
                ],
          color: ['#839afe', '#39d1e6'],
        });
      }
    },
    //获取折线图配置项
    getLineChartOptions(data) {
      let options = {
        color: data.color,
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
        },
        legend: {
          right: '3%',
          top: '5%',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
            color: 'rgba(255,255,255,1)',
          },
          backgroundColor: 'rgba(0,0,0,0.5)', //设置背景图片 rgba格式
          borderWidth: 0,
          padding: 5,
          formatter: function (params) {
            let res = '';
            let restop = '';
            for (let i = 0; i < params.length; i++) {
              restop = '<span>' + params[i].axisValue + '</span><br/>';
              res +=
                '<span>' +
                params[i].marker +
                params[i].seriesName +
                ' : ' +
                params[i].data +
                '</span><br/>';
            }
            return restop + res;
          },
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765',
            },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            onZero: false,
          },
          axisTick: {
            show: true,
          },
          data: data.timeList,
        },
        yAxis: [
          {
            name: data.yname,
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: data.sname[0],
            type: 'line',
            smooth: true,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            data: data.dataList1,
          },
          {
            name: data.sname[1],
            type: 'line',
            smooth: true,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            data: data.dataList2,
          },
        ],
      };
      return options;
    },
  },
};
</script>
<style lang="less"></style>
